<template>
  <li>
    <div class="tip-item">
      <div class="tip-title">
        {{ title }}
      </div>
      <div class="tip-desc">
        {{ desc }}
      </div>
      <div class="tip-meta">
        <div class="tip-meta-item">
          <el-icon class="tip-meta-time-icon"><timer /></el-icon>
          <span>{{ time }}</span>
        </div>
        <div class="funcs">
          <a title="查看便签">
            <div
              class="view tip-meta-item tip-meta-func-icon"
              @click="viewFunc"
            >
              <el-icon><View /></el-icon>
            </div>
          </a>
          <a title="复制便签">
            <div class="copy tip-meta-item tip-meta-func-icon">
              <el-icon><copy-document /></el-icon>
            </div>
          </a>
          <a title="删除便签">
            <div class="delete tip-meta-item tip-meta-func-icon">
              <el-icon><delete /></el-icon>
            </div>
          </a>
        </div>
      </div>
    </div>
  </li>
  <card v-show="isView" @close-card="isView = false" />
</template>
<script lang="ts">
import { defineComponent, toRef, ref } from "vue";
import Card from "@/components/TipCard.vue";
export default defineComponent({
  props: {
    title: {
      type: String,
    },
    time: {
      type: String,
    },
    desc: {
      type: String,
    },
  },
  setup(props, context) {
    const isView = ref(false);
    function viewFunc() {
      isView.value = true;
    }
    return {
      isView,
      viewFunc,
    };
  },
  components: { Card },
});
</script>

<style lang="scss" scoped>
.tip-item {
  padding: 4px 8px 10px 6px;
  margin-top: 10px;
  border-bottom: 1px solid;
}
.tip-title {
  // 单行省略号
  white-space: nowrap;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 24px;
  max-height: 24px;
  font-size: 16px;
  font-weight: 500;
  color: #262626;
  margin-bottom: 4px;
  font-weight: bold;
}
.tip-desc {
  // 多行省略号
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #8c8c8c;
  height: 48px;
  max-height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 24px;
  font-size: 14px;
}
// 功能小图标部分
.tip-meta {
  font-size: 12px;
  margin-top: 16px;
  color: #8c8c8c;
  height: 22px;
  display: flex;
  justify-content: space-between;
}
.tip-meta-time-icon {
  margin-right: 4px;
}
.tip-meta-func-icon {
  margin-left: 8px;
}
.tip-meta-func-icon:hover {
  cursor: pointer;
  color: #3e89c1;
}
.tip-meta-item {
  line-height: 22px;
  height: 22px;
  display: flex;
  align-items: center;
}
.funcs {
  display: flex;
}
</style>
